<template>
  <el-container class="container">
    <el-aside class="aside" :style="{width: collapseObj.asideWith}">
      <el-menu
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse" :collapse-transition="false" router :default-active="$store.state.defaultActive">
        <el-menu-item index="about">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="user">
            <i class="el-icon-user-solid"></i>
            <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="shop">
          <i class="el-icon-s-shop"></i>
          <span slot="title">店铺管理</span>
        </el-menu-item>
        <el-menu-item index="goods">
          <i class="el-icon-shopping-cart-full"></i>
          <span slot="title">商品管理</span>
        </el-menu-item>
        <el-menu-item index="prospec">
          <i class="el-icon-discount"></i>
          <span slot="title">商品规格管理</span>
        </el-menu-item>
        <el-menu-item index="sales">
          <i class="el-icon-notebook-2"></i>
          <span slot="title">销售记录管理</span>
        </el-menu-item>
        <el-menu-item index="loss">
          <i class="el-icon-notebook-1"></i>
          <span slot="title">商品报损管理</span>
        </el-menu-item>
        <el-menu-item index="cabinet">
          <i class="el-icon-takeaway-box"></i>
          <span slot="title">展示柜管理</span>
        </el-menu-item>
        <el-menu-item index="type">
          <i class="el-icon-picture"></i>
          <span slot="title">分类管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main class="main">
      <el-header class="header" style="height: 56px">
        <el-row>
          <el-col :span="1" class="menu-toggle">
            <i :class="collapseObj.showMenuIcon" :title="collapseObj.iconTitle" @click="zoom"></i>
          </el-col>
          <el-col :span="6">
            <el-breadcrumb v-if="breadcrumbList.length>1" separator-class="el-icon-arrow-right">
              <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index" :to="{ path: item.path }">
                {{ item.title }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="5" :offset="12">
            <span>当前用户：</span>
            <el-tag style="margin-right: 10px">{{ userInfo.nickname }}</el-tag>
            <el-dropdown trigger="click">
              <div class="avatar">
                <img style="height: 50px;width: 50px" :src="baseImagePath+userInfo.avatar" />
              </div>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="editInfo">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="updatePassword">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="confirmOut">退出系统</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="content">
        <router-view></router-view>
      </el-main>
    </el-main>
    <UserAddOrUpdate ref="editUser" @onCloseWin="getUser"/>
    <Password ref="updatePassword" @onCloseWin="logout"/>
  </el-container>
</template>

<script>
import UserAddOrUpdate from './user/UserAddOrUpdate'
import Password from './user/Password'
export default {
  name: 'Home',
  data () {
    return {
      userInfo: {},
      isCollapse: false,
      breadcrumbList: [{ title: '首页', path: '/' }],
      baseImagePath: process.env.VUE_APP_BASE_API + '/img/',
      infoVisible: false,
      passwordVisible: false
    }
  },
  components: {
    UserAddOrUpdate, Password
  },
  computed: {
    collapseObj () {
      return {
        asideWith: this.isCollapse ? '56px' : '200px',
        showMenuIcon: this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold',
        iconTitle: this.isCollapse ? '展开菜单' : '关闭菜单'
      }
    }
  },
  methods: {
    editInfo () {
      this.$refs.editUser.init(this.userInfo.userId)
    },
    updatePassword () {
      this.$refs.updatePassword.init(this.userInfo.username)
    },
    zoom () {
      this.isCollapse = !this.isCollapse
    },
    confirmOut () {
      this.$confirm('确定退出系统吗？', { type: 'info' }).then(() => {
        this.logout()
      })
    },
    logout () {
      this.$http.post('/sys/logout').then((data) => {
        if (data.code === 0) {
          this.$cookies.remove('token')
          this.$router.replace('login')
        }
      })
    },
    getUser () {
      this.$http.get('/sys/user/info').then((data) => {
        if (data.code === 0) {
          this.userInfo = data.user
        } else {
          this.$alert(data.msg)
        }
      })
    }
  },
  created () {
    this.getUser()
  }
}
</script>

<style scoped lang="scss">
.container {
  .aside {
    height: 100vh;
    background-color: #545c64;

    ul {
      border: 0;
    }
  }

  .main {
    padding: 0;
    background-color: whitesmoke;
    height: 100vh;
    overflow: hidden;

    .header {
      background-color: white;

      & > div {
        height: 100%;

        & > div {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            font-size: 26px;
            color: #909399;
            cursor: pointer;
          }

          .avatar {
            height: 50px;
            width: 50px;
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
          }
        }
      }
    }

    .content {
      background-color: white;
      margin: 20px;
      height: calc(100vh - 60px);
    }
  }
}
</style>
